<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=0">
    <title>12354山卡拉火车网-首页</title>

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.4.1/css/bootstrap.min.css}"  media="all">
    <!--    导入bootstrap.js之前要先导入依赖的jquery-->
    <script type="text/javascript" th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/3.4.1/js/bootstrap.min.js}"></script>

<!--    城市选项框-->
    <link rel="stylesheet" th:href="@{/css/style.css}" media="all">


<!--    时间框js-->
    <script type="text/javascript" th:src="@{/js/moment-with-locales.js}"></script>
    <style>
        .modal-content{
            position: absolute;
            top: 220px;
        }
        .container{
            padding-right:15px!important;
        }
        .modal-open{
            overflow-x: scroll;
            overflow-y: hidden;
        }
        .modal-open .modal {
            overflow-x: scroll;
            overflow-y: hidden;
        }
        body{
            padding-right:0 !important;
            overflow-x: hidden;
        }
        .bg-blue{
            background-color: #3B99FC;
        }
        .blue{
            color: #3B99FC;
        }
    </style>
</head>

<body style="width: 1920px">
<!-- 1.加载动画div -->
<div id="LoadingBar" style="background-color: rgba(0, 0, 0, 0.6);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
z-index: 999; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%;">
    <!-- load动画div -->
    <div class="spinner" style="position: absolute; top: 40%; left: 50%;">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
<!-- 2.顶部logo跟登陆导航-->
<div th:insert="components/public/header :: html"></div>
<script>
    /**
     * 这是为了解决js下拉栏无法下拉的问题
     */
    $(".dropdown").each(function () {
        $(this).click(function () {
            if($(this).hasClass('open'))
                $(this).removeClass('open');
            else
                $(this).addClass('open');
        })
    });
</script>
<!-- 3.轮播图 -->
<div th:insert="components/public/carousel :: html" class="bg-blue"></div>

<!--第一个模态框-->
<div style="z-index: 999;position: fixed;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">请选择出发城市</h4>
            </div>
            <div class="modal-body">
                <!-- 在这里添加一些文本 -->
                <fieldset>
                    <div id="addr-choice">
                        <ul id="title-wrap">
                            <li value="0">省份</li>
                            <li value="1">城市</li>
                            <li value="2">县区</li>
                        </ul>
                        <div id="show-panel">
                            <ul id="addr-wrap">
                            </ul>
                        </div>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary met2" data-dismiss="modal" style="background-color: #3B99FC">确认地点</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--第二个模态框-->
<div style="z-index: 999;position: fixed;" class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" >请选择到达城市</h4>
            </div>
            <div class="modal-body">
                <fieldset>
                    <div id="data-wrap">
                        <ul id="data-order">
                            <li value='0'>热门</li>
                            <li value='1'>ABCD</li>
                            <li value='2'>EFGH</li>
                            <li value='3'>JKLM</li>
                            <li value='4'>NPQR</li>
                            <li value='5'>STWX</li>
                            <li value='6'>YZ</li>
                        </ul>
                        <div id="data-show"></div>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" style="background-color: #3B99FC;color: white">确认目的地</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--首页专属开始-->
<!--4.买票块-->
<div class="container" style="z-index: 0; position:absolute; top:370px; left: 360px;">
　　<style>
        .modal-backdrop{
            z-index:0;
        }
        .modal-open .modal {
            overflow-x: hidden;
            overflow-y: scroll;
        }
    </style>
    <div class="panel panel-default" style="box-shadow: rgb(209, 209, 209) 5px 5px 5px 1px;">
        <div class="panel-heading">
            <h3 class="panel-title">
                <span class="glyphicon glyphicon-time" style="color: orange"></span> 预订服务时间为 <strong>上午5:00</strong> 至 <strong>晚上11:30</strong>（中国标准时间）
            </h3>
        </div>
        <form th:action="@{/ticket}" id="ticket_form" method="post">
            <div class="panel-body">
            <div class="row">
                <div class="panel panel-default col-md-3 myhead" style="margin-left: 37px;">
                    <style>
                        .myhead{
                            padding-left: 0;
                            padding-right: 0;
                        }
                        .left5{
                            margin-left: 2px;
                        }
                    </style>
                    <div class="panel-heading">
                        <h2 class="panel-title" style="padding: 0 0;">
                            <span class="glyphicon glyphicon-arrow-up"></span> 出发地
                        </h2>
                    </div>
                    <div class="panel-body">
                        <div class="row left5">
                            <input type="text" id="addr-show02" class="form-control input-lg"
                                   name="departure_city" data-toggle="modal" data-target="#myModal" placeholder="请选择城市" style="width: 250px;height: 40px;">
                        </div>
                    </div>
                </div>

                <!-- 图标 -->
                <div class="col-md-1" style="margin-top: 20px; margin-left: 15px;">
                    <label for="addr-show03">
                        <span style="font-size: 50px; color: orange;" class="glyphicon glyphicon-arrow-right"></span>
                    </label>
                </div>
                <div class="panel panel-default col-md-3 myhead">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <span class="glyphicon glyphicon-arrow-down"></span> 到达地
                        </h2>
                    </div>
                    <div class="panel-body">
                        <!-- 添加选城市功能 -->
                        <div class="row left5">
                            <input type="text" id="addr-show03" class="form-control input-lg"
                                   name="arrival_city" data-toggle="modal" data-target="#myModal2" placeholder="请选择城市" style="width: 250px;height: 40px;">
                        </div>

                    </div>
                </div>

                <div class="panel panel-default col-md-3 col-md-offset-1 myhead">
                    <div class="panel-heading">
                        <h2 class="panel-title">
                            <span class="glyphicon glyphicon-calendar"></span>
                            出发日期
                        </h2>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="form-group">
                                <div class='input-group date' id='datetimepicker1' style="margin-top: 10px">
                                    <input type='text' class="form-control" name="departure_time" style="width: 210px;margin-left: 15px" autocomplete="off"/>
                                    <span class="input-group-addon" id="date_btn_01" style="width: 20px">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <link rel="stylesheet" th:href="@{/css/bootstrap-datetimepicker.min.css}" media="all">
                    <script th:src="@{/js/bootstrap-datetimepicker.min.js}"></script>
                    <!--<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">-->
                    <!--<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>-->

                    <script type="text/javascript">
                        $(function () {
                            $('#datetimepicker1').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn')
                            });
                            $('#datetimepicker2').datetimepicker({
                                format: 'YYYY-MM-DD hh:mm',
                                locale: moment.locale('zh-cn')
                            });
                        });
                    </script>
                </div>
            </div>

            <div class="row">
                <div class="checkbox col-md-3 col-md-offset-2">
                    <label class="h4">
                        <input type="checkbox" name="only_high_speed"> <b>只选高速动车</b>
                    </label>
                </div>
                <div class="btn col-md-2 col-md-offset-2" style="color: white; background-color: orange;" id="query_ticket">
                    <h2 class="" style="margin-top: 8px;">
                        查询
                    </h2>
                </div>
            </div>
        </div>
        </form>
        <script>
            $('#query_ticket').click(function () {
                $('#ticket_form').submit();
            });
        </script>
    </div>
</div>
<!-- 5.旅行指导 -->
<div class="container" style="position: absolute; top: 750px; left: 360px; height: 180px;">
    <div class="row">
        <div class="col-md-3 col-md-offset-1 blue" style="font-size: 40px" >
            快速指南
        </div>
    </div>


    <div class="row">
        <div class="col-md-4 col-md-offset-2 h3 ">
            <a th:href="@{/guide}" class="blue" style="text-decoration: none;" >该网站接受哪些身份证件？</a>
            <br/>
            <a th:href="@{/guide}" class="blue" style="text-decoration: none;">该网站提供哪些服务？</a>
        </div>
        <div class="col-md-4 col-md-offset-1 h3">
            <a th:href="@{/guide}" class="blue" style="text-decoration: none;">改签服务是什么？</a>
            <br/>
            <a th:href="@{/guide}" class="blue" style="text-decoration: none;">改签火车票有什么规则?</a>
        </div>
    </div>
    <div class="row blue">
        <div class="col-md-2 col-md-offset-7 h4" >
            <a th:href="@{/guide}" class="blue" style="color: gray; text-decoration: none;">了解更多</a>
        </div>
    </div>
</div>
<!--首页专属结束-->

<!-- 6.网页页尾 -->
<div th:insert="components/public/footer :: html" style="position:absolute; top: 1000px; width: 1920px"></div>

<!-- 城市js -->
<script src="/js/city.js"></script>
<script src="/js/city02.js"></script>
<script src="/js/method02.js"></script>
<script src="/js/method03.js"></script>
<!--加载页面结束-->
<script th:inline="javascript">
    // 利用onload的特性: 只有当页面完全加载完成的时候, 才会被执行
    //要放在最后面
    window.onload = function() {
        var objLoading = document.getElementById("LoadingBar");
        if (objLoading != null) {
            objLoading.style.display = "none";
        }
    }
</script>

</body>
</html>